<template>
    <div  style='display:inline-block;'>
        <Modal class-name="vertical-center-modal" v-model="modal" width="360">
            <p slot="header" :class='cTitleClass' style="text-align:center">
                <Icon type="information-circled"></Icon>
                <span>操作确认</span>
            </p>
            <div style="text-align:center">
                <p>{{pMessage}}？</p>
            </div>
            <div slot="footer">
                <btn-submit  class="btn w100" :class='cBtnClass' type="button" :p-click="confirmChange">{{pBtnText}}</btn-submit>
            </div>
        </Modal>
        <span  @click='openConfirm()'><slot></slot></span>
    </div>
</template>
<script>
    export default{
        name:'BtnConfirm',
        props:{
            pMessage:{
                type:String,
                default:'你确定要进行此操作吗'
            },
            pType:{
                type:String,
                default:'success'//primary secondary success danger warning info dark
            },
            pInfo:{
                type:Object,
            },
            pBtnText:{
                type:String,
                default:'确定'
            },
            pSubmit:Function,
        },
        data(){
            return{
                modal:false,
                info:{},
            }
        },
        computed:{
          cTitleClass(){
              return 'text-'+this.pType
          },
          cBtnClass(){
              return 'btn-'+this.pType
          }
        },
        methods:{
            handleOpen(info){
                this.info = Object.assign({},info);
                this.openConfirm();
            },
            openConfirm(){
                this.$set(this,'modal',true)
            },
            async confirmChange(){
                if(this.pSubmit){
                    const res = await this.pSubmit(this.pInfo||this.info);
                    this.$set(this,'modal',false);
                    return res;
                }else {
                    this.$set(this,'modal',false);
                    this.$emit('on-change',this.pInfo||this.info);
                    return false
                }
            }
        },
        components:{
        }
    }
</script>